import { getUserApproval, getUserList, getUserLock } from "@/api/user";
import { Button, Space, Switch, Table, Form, Input, DatePicker } from "antd";
import type { RangePickerProps } from 'antd/es/date-picker';
import moment from 'moment';
import { useCallback, useEffect, useState } from "react"
import { FormOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";

export default function UserList() {
    const navigate = useNavigate();
    const [userList, setUserList] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(false);
    const [statusLoading, setStatusLoading] = useState<boolean>(false);
    const [total, setTotal] = useState<number>(1);
    const [current, setCurrent] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(1);
    const getUserListAsync = useCallback(async (page: number, pageSize: number) => {
        setLoading(true);
        const { keyword, date } = form.getFieldsValue(true);
        const searchOption = {
            keyword,
            createTimeBegin: date && date[0].format("YYYY-MM-DD"),
            createTimeEnd: date && date[1].format("YYYY-MM-DD"),
        };
        const result: any = await getUserList(page, pageSize, searchOption);
        setLoading(false);
        setUserList(result.records);
        setTotal(result.total);
        setCurrent(result.current);
        setPageSize(result.size);
    }, [])

    useEffect(() => {
        getUserListAsync(1, 5);
    }, [])
    const [form] = Form.useForm();
    const { RangePicker } = DatePicker;
    return (
        <Space direction="vertical" style={{ width: "100%" }}>
            <Form form={form} onFinish={() => {

                getUserListAsync(1, pageSize);
            }} layout="inline">
                <Form.Item name="keyword">
                    <Input type="text" placeholder="请输入姓名或手机号" />
                </Form.Item>
                <Form.Item label="创建时间" name="date">
                    <RangePicker />
                </Form.Item>
                <Form.Item>
                    <Button
                        htmlType='submit'
                        icon={<SearchOutlined />} type="primary">搜索</Button>
                </Form.Item>
                <Form.Item>
                    <Button onClick={() => {
                        form.resetFields();
                    }}>重置</Button>
                </Form.Item>
            </Form>
            <Table scroll={{ x: "1500px" }} loading={loading} rowKey={"id"} dataSource={userList}
                pagination={{
                    current,
                    pageSize,
                    total,
                    onChange: getUserListAsync
                }}
                columns={[
                    {
                        title: "序号",
                        align: "center",
                        render(values, rows, index) {
                            return (current - 1) * pageSize + index + 1
                        }
                    },
                    {
                        title: "姓名",
                        align: "center",
                        dataIndex: "name"
                    },
                    {
                        title: "昵称",
                        align: "center",
                        dataIndex: "nicename"
                    },
                    {
                        title: "手机号",
                        align: "center",
                        dataIndex: "phone"
                    },
                    {
                        title: "是否锁定",
                        align: "center",
                        render(rows) {
                            return (
                                <Switch checked={rows.status === 1} onChange={async () => {
                                    await getUserLock(rows.id, rows.status);
                                    setUserList(userList.map((info: any) => {
                                        if (info.id === rows.id) info.status = info.status === 1 ? 0 : 1;
                                        return info;
                                    }))
                                }} />
                            )
                        }
                    },
                    {
                        title: "是否认证",
                        align: "center",
                        render(rows) {
                            return rows.param.authStatusString
                        }
                    },
                    {
                        title: "创建时间",
                        align: "center",
                        dataIndex: "createTime"
                    },
                    {
                        title: "修改时间",
                        align: "center",
                        dataIndex: "updateTime"
                    },
                    {
                        title: "操作",
                        fixed: "right",
                        width: "240px",
                        align: "center",
                        render(rows) {
                            return (
                                <Space>
                                    <Button type='primary' onClick={()=>{
                                        navigate("/user/show/"+rows.id);
                                    
                                    }}>查看</Button>
                                    <Button disabled={rows.authStatus !== 0} onClick={async () => {
                                        await getUserApproval(rows.id, 2);
                                        await getUserListAsync(current, pageSize);
                                    }} type='primary'>通过</Button>
                                    <Button disabled={rows.authStatus !== 0} onClick={async () => {
                                        await getUserApproval(rows.id, -1);
                                        await getUserListAsync(current, pageSize);
                                    }} danger type='primary'>不通过</Button>
                                </Space>
                            )
                        }
                    }
                ]}></Table>
        </Space>
    )
}